<template>
  <div>
    <el-card style="margin-bottom: 10px" shadow="never">
      <el-form :inline="true" class="search-form">
        <el-form-item label="患者姓名">
          <el-input
            v-model="queryForm.patientName"
            placeholder="请输入患者姓名"
            clearable
          />
        </el-form-item>
        
        <el-form-item label="服务状态">
          <el-select
            v-model="queryForm.status"
            placeholder="全部"
            clearable
          >
            <el-option label="未开始" :value="1"/>
            <el-option label="进行中" :value="2"/>
            <el-option label="已结束" :value="3"/>
          </el-select>
        </el-form-item>

        <el-form-item label="时间范围">
          <el-date-picker
            v-model="timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="x"
          />
        </el-form-item>

        <el-form-item label="服务类型 ID">
          <el-input-number
            v-model="queryForm.serviceTypeId"
            :min="0"
            placeholder="请输入服务类型 ID"
            clearable
          />
        </el-form-item>

        <el-form-item label="服务开始时间">
          <el-date-picker
            v-model="queryForm.startTime"
            type="datetime"
            placeholder="请选择服务开始时间"
            value-format="x"
            clearable
          />
        </el-form-item>

        <el-form-item label="服务结束时间">
          <el-date-picker
            v-model="queryForm.endTime"
            type="datetime"
            placeholder="请选择服务结束时间"
            value-format="x"
            clearable
          />
        </el-form-item>

        <el-form-item label="最低总价">
          <el-input-number
            v-model="queryForm.totalPriceMin"
            :min="0"
            placeholder="请输入最低总价"
            clearable
          />
        </el-form-item>

        <el-form-item label="最高总价">
          <el-input-number
            v-model="queryForm.totalPriceMax"
            :min="0"
            placeholder="请输入最高总价"
            clearable
          />
        </el-form-item>

        <el-form-item label="是否退款">
          <el-select
            v-model="queryForm.isRefund"
            placeholder="请选择是否退款"
            clearable
          >
            <el-option label="否" :value="0"/>
            <el-option label="是" :value="1"/>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never">
      <div class="options">
        <el-button type="info" @click="showBatch = !showBatch">
          {{ showBatch ? '取消批量操作' : '批量操作' }}
        </el-button>
        <transition-group name="list">
          <el-button v-if="showBatch" type="danger" @click="handleBatchDelete">
            批量删除
          </el-button>
        </transition-group>
      </div>

      <ServiceOrderTable
  :list="pager.list"
  :loading="pager.loading"
  :show-selection="showBatch"
  @selection-change="handleSelectionChange"
  @detail="handleOrderDetail"   
  @service-detail="handleServiceDetail"  
  @delete="handleDelete"
/>
      
      <el-pagination
        v-model:current-page="pager.currentPage"
        v-model:page-size="pager.pageSize"
        :total="pager.total"
        :page-sizes="[8, 10, 20, 50]"
        layout="total, sizes, prev, pager, next"
        @current-change="getList"
        @size-change="getList"
      />
   
    </el-card>

    <ServiceDetail
  v-model:visible="showServiceDetail" 
  :service-id="currentServiceId"
/>
  </div>
</template>

<script setup>
// 修正后
import { ref, onMounted } from 'vue' // 添加 onMounted
import usePagination from '@/hooks/usePagination'
import { getServiceOrderListAPI } from '@/network/serviceOrder'
import ServiceOrderTable from './components/ServiceOrderTable.vue'
import ServiceDetail from './components/ServiceDetail.vue'
// 新增状态
const showServiceDetail = ref(false)
const currentServiceId = ref(null)

// 新增处理函数
const handleServiceDetail = (serviceId) => {
  currentServiceId.value = serviceId
  showServiceDetail.value = true
}
const queryForm = ref({
  patientName: '',
  status: null,
  serviceTypeId: null,
  startTime: null,
  endTime: null,
  totalPriceMin: null,
  totalPriceMax: null,
  isRefund: null
})

const timeRange = ref([])
const showDetail = ref(false)
const showBatch = ref(false)
const currentOrderId = ref(null)
const selectedOrders = ref([])

const { pager, getList, resetPage } = usePagination({
  request: getServiceOrderListAPI,
  params: queryForm,
  extraParams: {
    orderTimeStart: () => timeRange.value?.[0] || null,
    orderTimeEnd: () => timeRange.value?.[1] || null
  }
})

// 新增：页面加载时自动触发查询
onMounted(() => {
  getList()
})

const handleReset = () => {
  queryForm.value = {
    patientName: '',
    status: null,
    serviceTypeId: null,
    startTime: null,
    endTime: null,
    totalPriceMin: null,
    totalPriceMax: null,
    isRefund: null
  }
  timeRange.value = [];
  resetPage();  // 确保调用 usePagination 的 resetPage
  getList();    // 重置后重新加载数据
}

const handleSelectionChange = (selection) => {
  selectedOrders.value = selection.map(item => item.serviceId)
}

const handleDetail = (id) => {
  currentOrderId.value = id
  showDetail.value = true
}



const handleBatchDelete = async () => {
  if (selectedOrders.value.length === 0) return
  // 实现批量删除逻辑
}
</script>

<style scoped>
.options {
  margin-bottom: 15px;
}
.list-enter-active {
  transition: all 0.3s ease;
}
.list-enter-from {
  opacity: 0;
  transform: translateX(-10px);
}
</style>